<template>
  <div class="fence">
    <div class="fence-style-body">
      <el-table :data="fenceData" style="width: 100%;background-color: rgba(1,1,1,0);" height="182px" stripe highlight-current-row :header-cell-style="{background:'#1C7CD5',color:'#fff'}" ref="fenceTable" @selection-change="handleCurrentChange" @row-click="handleCurrentChange">
        <el-table-column prop="name" label="名称" width="160" height="20">
        </el-table-column>
        <el-table-column prop="valid" label="状态" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.valid==1">生效</span>
            <span v-if="scope.row.valid==0">失效</span>
          </template>
        </el-table-column>
        <el-table-column prop="rule" width="80" label="围栏规则">
          <template slot-scope="scope">
            <span v-if="scope.row.rule==1">禁入</span>
            <span v-if="scope.row.rule==0">禁出</span>
          </template>
        </el-table-column>
        <el-table-column prop="startTime" width="80" label="生效时间">
        </el-table-column>
        <el-table-column prop="endTime" width="80" label="失效时间">
        </el-table-column>
        <el-table-column prop="type" width="80" label="围栏类型">
          <template slot-scope="scope">
            <span v-if="scope.row.type==1">全局</span>
            <span v-if="scope.row.type==0">局部</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-row>
              <el-button type="success" @click.stop="editFence(scope.$index, scope.row)" style="border:0px solid #1c7cd5;border-radius:2px;background-color:#1c7cd5;width: 36px;height:20px;font-size: 12px;padding: 0">编辑</el-button>
              <el-button type="info" @click.stop="deleteFence(scope.$index, scope.row)" style="border:0px solid #1c7cd5;border-radius:2px;background-color:#F33718;width: 36px;height:20px;font-size: 12px;padding: 0;margin: 2px">删除</el-button>
              <el-button v-if="scope.row.source==0 && (scope.row.points==null || scope.row.points == '')" type="info" @click.stop="refFence(scope.$index, scope.row)" style="border:0px solid #1c7cd5;border-radius:2px;background-color:#398d8d;width: 36px;height:20px;font-size: 12px;padding: 0;margin: 2px">刷新</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="fence-add">
      <div style="width: 100px">
        <el-button size="mini" style="color:#1c7cd5;width: 100px;height: 24px;padding: 4px 3px" icon="el-icon-plus" @click="fenceadd">新增围栏</el-button>
      </div>
    </div>
    <div class="cone-list" :style="coneListStyle">
      <div style="font-size: 12px;color: #1C7CD5;padding-left: 3px;"> 请选择锥桶分组：</div>
      <el-radio-group v-model="fenceInfo.group" size="mini" style="padding-top: 5px">
        <el-radio :label="value.group" :key="value.key" v-for="(value, key, index) in conegroupExz" border>{{value.group}}-{{value.state==1?"已绑":"未绑"}}</el-radio>
      </el-radio-group>
    </div>
    <div class="fence-form" :style="fenceStyle">
      <el-form class="apply-form first-form" :model="fenceInfo" :rules="rules" ref="saveFenceForm">
        <input type="hidden" v-model="fenceInfo.id">
        <input type="hidden" v-model="fenceInfo.source">
        <input type="hidden" v-model="fenceInfo.group">
        <input type="hidden" v-model="fenceInfo.ptNum">
        <input type="hidden" v-model="fenceInfo.points">
        <span style="font-size: 12px;color:#888">点击鼠标左键按键绘制围栏，双击鼠标 左键结束绘制</span>
        <el-form-item label="名称:" prop="name">
          <el-input v-model="fenceInfo.name" size="mini" placeholder="请填写名称"></el-input>
        </el-form-item>
        <div style="font-size: 12px;color:#111;padding:8px 0"><span style="color:red;">* </span>围栏状态:</div>
        <el-select v-model="fenceInfo.valid" size="mini" style="width: 180px;" placeholder="请选择围栏状态">
          <el-option :value="1" label="生效"></el-option>
          <el-option :value="0" label="失效"></el-option>
        </el-select>
        <div style="font-size: 12px;color:#111;padding:8px 0"><span style="color:red;">* </span>围栏类型:</div>
        <el-select v-model="fenceInfo.type" size="mini" style="width: 180px;" placeholder="请选择围栏类型">
          <el-option :value="1" label="全局"></el-option>
          <el-option :value="0" label="局部"></el-option>
        </el-select>
        <div style="font-size: 12px;color:#111;padding:8px 0"><span style="color:red;">* </span>规则类型:</div>
        <el-select v-model="fenceInfo.rule" size="mini" style="width: 180px;" placeholder="请选择规则类型">
          <el-option :value="1" label="禁入"></el-option>
          <el-option :value="0" label="禁出"></el-option>
        </el-select>
        <div style="font-size: 12px;color:#111;padding:8px 0"><span style="color:red;">* </span>生效时间:</div>
        <el-time-picker v-model="fenceInfo.startTimeDate" style="width: 180px" size="mini" placeholder="开始时间" @change="startTimeChange">
        </el-time-picker>
        <el-time-picker v-model="fenceInfo.endTimeDate" style="width: 180px;margin-top: 4px" size="mini" placeholder="结束时间" @change="endTimeChange">
        </el-time-picker>
        <el-row style="display: inline-flex;width: 160px;">
          <div style="cursor:pointer" @click="drawPolygon"><img src="~@/assets/img/hz.png" style="height: 11px" /><span :style="typeStyle1">绘制</span></div>&nbsp;
          <div style="cursor:pointer;padding-left: 10px" @click="checkCone"><img src="~@/assets/img/tz.png" style="height: 11px" /><span :style="typeStyle2">锥桶</span></div>
        </el-row>
        <el-row style="display: inline-flex;width: 180px;padding-left: 80px;">
          <el-button style="font-size:9px;width: 110px;height: 22px;padding: 1px;background-color: #888;color: #fff;" @click="fenceformcancle">取消</el-button>
          <el-button style="font-size:9px;width: 110px;height: 22px;padding: 1px;margin-left: 4px;background-color: #1C7CD5;color: #fff;" @click="fenceformadd('saveFenceForm')">新增</el-button>
        </el-row>
      </el-form>
    </div>
    <div class="fence-form-edit" :style="fenceEditStyle">
      <el-form class="apply-form first-form" :model="fenceInfo" :rules="rules" ref="editFenceForm">
        <input type="hidden" v-model="fenceInfo.id">
        <input type="hidden" v-model="fenceInfo.source">
        <input type="hidden" v-model="fenceInfo.group">
        <input type="hidden" v-model="fenceInfo.ptNum">
        <input type="hidden" v-model="fenceInfo.points">
        <span style="font-size: 12px;color:#888">点击鼠标左键按键绘制围栏，双击鼠标 左键结束绘制</span>
        <el-form-item label="名称:" prop="name">
          <el-input v-model="fenceInfo.name" size="mini" placeholder="请填写名称"></el-input>
        </el-form-item>
        <div style="font-size: 12px;color:#111;padding:8px 0"><span style="color:red;">* </span>围栏状态:</div>
        <el-select v-model="fenceInfo.valid" size="mini" style="width: 180px;" placeholder="请选择围栏状态">
          <el-option :value="1" label="生效"></el-option>
          <el-option :value="0" label="失效"></el-option>
        </el-select>
        <div style="font-size: 12px;color:#111;padding:8px 0"><span style="color:red;">* </span>围栏类型:</div>
        <el-select v-model="fenceInfo.type" size="mini" style="width: 180px;" placeholder="请选择围栏类型">
          <el-option :value="1" label="全局"></el-option>
          <el-option :value="0" label="局部"></el-option>
        </el-select>
        <div style="font-size: 12px;color:#111;padding:8px 0"><span style="color:red;">* </span>规则类型:</div>
        <el-select v-model="fenceInfo.rule" size="mini" style="width: 180px;" placeholder="请选择规则类型">
          <el-option :value="1" label="禁入"></el-option>
          <el-option :value="0" label="禁出"></el-option>
        </el-select>
        <div style="font-size: 12px;color:#111;padding:8px 0"><span style="color:red;">* </span>生效时间:</div>
        <el-time-picker v-model="fenceInfo.startTimeDate" style="width: 180px" size="mini" placeholder="开始时间" @change="startTimeChange">
        </el-time-picker>
        <el-time-picker v-model="fenceInfo.endTimeDate" style="width: 180px;margin-top: 4px" size="mini" placeholder="结束时间" @change="endTimeChange">
        </el-time-picker>
        <el-row style="display: inline-flex;width: 160px;" v-if="fenceInfo.source=='0'">
          <div style="cursor:not-allowed"><img src="~@/assets/img/hz.png" style="height: 11px" /><span style="font-size: 12px;color: #777">绘制</span></div>&nbsp;
          <div style="cursor:not-allowed;padding-left: 10px"><img src="~@/assets/img/tz.png" style="height: 11px" /><span style="font-size: 12px;color: #1c7cd5">锥桶</span></div>
        </el-row>
        <el-row style="display: inline-flex;width: 160px;" v-if="fenceInfo.source=='1'">
          <div style="cursor:not-allowed"><img src="~@/assets/img/hz.png" style="height: 11px" /><span style="font-size: 12px;color: #1c7cd5">绘制</span></div>&nbsp;
          <div style="cursor:not-allowed;padding-left: 10px"><img src="~@/assets/img/tz.png" style="height: 11px" /><span style="font-size: 12px;color: #777">锥桶</span></div>
        </el-row>
        <el-row style="display: inline-flex;width: 180px;padding-left: 80px;">
          <el-button style="font-size:9px;width: 110px;height: 22px;padding: 1px;background-color: #888;color: #fff;" @click="fenceEditormcancle">取消</el-button>
          <el-button style="font-size:9px;width: 110px;height: 22px;padding: 1px;margin-left: 4px;background-color: #1C7CD5;color: #fff;" @click="fenceformsave('editFenceForm')">保存</el-button>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import AMap from "AMap"
export default {
  name: "Fence",
  data() {
    const isNum = (rule, value, callback) => {
      const age = /^[A-Za-z0-9\u4e00-\u9fa5]{1,500}$/
      if (!age.test(value)) {
        callback(new Error('围栏名称不能输入特殊字符'))
      }else{
        callback()
      }
    }
    const lengthMax = (rule,value,callback) => {
      var temp = 0
      for (var i = 0; i < value.length; i++) {
        if (/[\u4e00-\u9fa5]/.test(value[i])) {
          temp += 2
        } else {
          temp++
        }
      }
      if (temp > 50) {
        callback(new Error('长度不能超过50个字符'))
      }else {
        callback()
      }
    }
    return {
      fenceStyle: "display:none",
      coneListStyle: "display:none",
      fenceInfo: {
        id: "",
        source: "1",
        name: "",
        rule: 1,
        valid: 1,
        type: 1,
        startTime: "00:00:00",
        endTime: "23:59:59",
        startTimeDate: "2008-01-01 00:00:00",
        endTimeDate: "2008-01-01 23:59:59",
        ptNum: 0,
        points: "",
        group: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入围栏名称", trigger: "blur" },
          { required: true, message: "请输入围栏名称", trigger: "change" },
          { validator: isNum,trigger: "blur"},
          { validator: lengthMax,trigger: "blur"},
        ]
      },
      fenceData: [],
      overlays: [],
      mouseTool: undefined,
      conegroup: [],
      conegroupExz: [],
      fenceEditStyle: "display:none",
      fence: undefined,
      polygons: [],
      typeStyle1: "font-size: 12px;color: #777",
      typeStyle2: "font-size: 12px;color: #777",
      markPoint: []
    }
  },
  mounted() {
    let _this = this

    this.axios
      .get("fence/listFences")
      .then(function(response) {
        let result = response.data
        if (result.code == "200") {
          _this.fenceData = result.result
        }
      })
      .catch(function(error) {
        console.log(error)
      })
    this.axios
      .get("cone/getGroup")
      .then(function(response) {
        let result = response.data
        if (result.code == "200") {
          _this.conegroup = result.result
        }
      })
      .catch(function(error) {
        console.log(error)
      })

    this.axios
      .get("cone/getGroupExz")
      .then(function(response) {
        let result = response.data
        if (result.code == "200") {
          _this.conegroupExz = result.result
        }
      })
      .catch(function(error) {
        console.log(error)
      })
  },
  beforeDestroy() {
    let _this = this
    _this.coneListStyle = "display:none"
    _this.fenceStyle = "display:none"
    _this.fenceEditStyle = "display:none"
    if (_this.overlays.length > 0) {
      global.map.remove(_this.overlays)
      _this.overlays.splice(0, 1)
      _this.overlays = []
    }
    global.map.setDefaultCursor("pointer")
    _this.removePol()
    _this.typeStyle1 = "font-size: 12px;color: #777"
    _this.typeStyle2 = "font-size: 12px;color: #777"
  },

  methods: {
    startTimeChange(val) {
      this.fenceInfo.startTime = this.formatTime(val)
      this.fenceInfo.startTimeDate = this.format(val)
    },
    endTimeChange(val) {
      this.fenceInfo.endTime = this.formatTime(val)
      this.fenceInfo.endTimeDate = this.format(val)
    },
    removePol() {
      let that = this
      if (that.polygons.length > 0) {
        global.map.remove(that.polygons)
        that.polygons = []
        global.map.remove(that.markPoint)
        that.markPoint = []
      }
    },

    refFence(index, row) {
      let that = this
      that.removePol()
      this.axios
        .get("fence/listFences")
        .then(function(response) {
          let result = response.data
          that.$message({
            message: "锥桶围栏生成中，稍后刷新显示！",
            duration: 2000,
            type: "warning",
            offset: "300"
          })
          if (result.code == "200") {
            that.fenceData = result.result
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },

    handleCurrentChange(row, event, column) {
      let that = this
      that.removePol()
      this.axios
        .get("fence/getFenceById?ID=" + row.id)
        .then(function(response) {
          let result = response.data
          console.log(result)
          if (result.code == "200") {
            let f = result.result
            row.ptNum = f.ptNum
            row.points = f.points
            if (row.ptNum >= 3) {
              let weis = row.points
              let arrwei = weis.split(",")
              let po = []
              console.log(arrwei.length)
              for (let j = 0; j < arrwei.length - 1; j++) {
                let p = []
                p.push(arrwei[j])
                p.push(arrwei[++j])
                po.push(p)
              }

              //筒锥生成的围栏显示筒锥位置
              if (row.source == 0) {
                //是否圆形
                if (row.ptNum == 73) {
                  let yuandian = []
                  yuandian.push((parseFloat(arrwei[0]) + parseFloat(arrwei[72])) / 2)
                  yuandian.push((parseFloat(arrwei[1]) + parseFloat(arrwei[73])) / 2)
                  that.createMarkerPoint(yuandian)
                } else {
                  for (let s = 0; s < po.length; s++) {
                    console.log(po)
                    that.createMarkerPoint(po[s])
                  }
                }
              }

              let thisfence = new AMap.Polygon({
                path: po,
                strokeColor: "#1791fc",
                strokeWeight: 2,
                strokeOpacity: 0.2,
                fillOpacity: 0.5,
                fillColor: "#1791fc",
                zIndex: 50
              })

              that.polygons.push(thisfence)
              global.map.add(thisfence)
              global.map.panTo(po[0])
              global.map.setZoom(17)
            } else {
              that.$message({
                message: "锥桶围栏未生成，请检查锥桶是否已开机！",
                duration: 2000,
                type: "warning",
                offset: "300"
              })
            }
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    createMarkerPoint(lnglat) {
      let icon = "/static/img/p.png"
      let marker = new AMap.Marker({
        map: global.map,
        icon: icon,
        position: new AMap.LngLat(lnglat[0], lnglat[1]),
        zIndex: 9,
        offset: new AMap.Pixel(-6, -6)
      })
      this.markPoint.push(marker)
    },
    editFence(index, row) {
      this.removePol()
      this.refFence()
      row = JSON.parse(JSON.stringify(row))
      this.fenceStyle = "display:none"
      this.coneListStyle = "display:none"
      this.fenceEditStyle = "display:block"
      row.startTimeDate = "2008-01-01 " + row.startTime
      row.endTimeDate = "2008-01-01 " + row.endTime
      this.fenceInfo = row
      //显示围栏
      if (row.ptNum >= 3) {
        let weis = row.points
        let arrwei = weis.split(",")
        let po = []
        for (let j = 0; j < arrwei.length - 1; j++) {
          let p = []
          p.push(arrwei[j])
          p.push(arrwei[++j])
          po.push(p)
        }
        let thisfence = new AMap.Polygon({
          path: po,
          strokeColor: "#1791fc",
          strokeWeight: 2,
          strokeOpacity: 0.2,
          fillOpacity: 0.5,
          fillColor: "#1791fc",
          zIndex: 50
        })

        //筒锥生成的围栏显示筒锥位置
        if (row.source == 0) {
          //是否圆形
          if (row.ptNum == 73) {
            let yuandian = []
            yuandian.push((arrwei[0] + arrwei[72]) / 2)
            yuandian.push((arrwei[1] + arrwei[73]) / 2)
            this.createMarkerPoint(yuandian)
          } else {
            for (let s = 0; s < po.length; s++) {
              this.createMarkerPoint(po[s])
            }
          }
        }

        this.polygons.push(thisfence)
        global.map.add(thisfence)
      }
    },
    deleteFence(index, row) {
      let that = this
      that.coneListStyle = "display:none"
      that.fenceStyle = "display:none"
      that.fenceEditStyle = "display:none"
      that.removePol()
      that
        .$confirm("确定删除此电子围栏信息吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          this.removePol()
          that.axios
            .get("fence/deleteFence?id=" + row.id)
            .then(function(response) {
              let result = response.data
              if (result.statusCode == "200") {
                that.$message({
                  message: "删除数据成功！",
                  duration: 2000,
                  type: "success",
                  offset: "300"
                })
                that.axios
                  .get("fence/listFences")
                  .then(function(response) {
                    let result = response.data
                    if (result.code == "200") {
                      that.fenceData = result.result
                    }
                  })
                  .catch(function(error) {
                    console.log(error)
                  })
              }
            })
            .catch(function(error) {
              console.log(error)
            })
        })
        .catch(() => {})
    },
    fenceadd() {
      let that = this
      that.removePol()
      that.$refs.saveFenceForm.resetFields()
      that.fenceStyle = "display:block"
      that.coneListStyle = "display:none"
      that.fenceEditStyle = "display:none"
      that.fenceInfo.startTime = "00:00:00"
      that.fenceInfo.endTime = "23:59:59"
      that.fenceInfo.ptNum = 0
      that.fenceInfo.startTimeDate = "2008-01-01 00:00:00"
      that.fenceInfo.endTimeDate = "2008-01-01 23:59:59"
      that.typeStyle1 = "font-size: 12px;color: #777"
      that.typeStyle2 = "font-size: 12px;color: #777"
      that.$refs.fenceTable.setCurrentRow(null)
      that.axios
        .get("cone/getGroup")
        .then(function(response) {
          let result = response.data
          if (result.code == "200") {
            that.conegroup = result.result
          }
        })
        .catch(function(error) {
          console.log(error)
        })
      that.fenceInfo.group = null
    },

    fenceClose() {
      if (this.polygons.length > 0) {
        global.map.remove(this.polygons)
        this.polygons.splice(0)
        this.fence.splice(0)
        this.polygons = []
        this.fence = []
      }
    },
    fenceformcancle() {
      let _this = this
      if (_this.polygons > 0) global.map.remove(_this.polygons)
      _this.fenceStyle = "display:none"
      _this.coneListStyle = "display:none"
      _this.mouseTool.close(true)
      if (_this.overlays.length > 0) {
        global.map.remove(_this.overlays)
        _this.overlays.splice(0, 1)
        _this.overlays = []
      }
      global.map.setDefaultCursor("pointer")
      // this.$refs.saveFenceForm.resetFields();
      _this.typeStyle1 = "font-size: 12px;color: #777"
      _this.typeStyle2 = "font-size: 12px;color: #777"
    },
    fenceEditormcancle() {
      let _this = this
      _this.removePol()
      _this.fenceStyle = "display:none"
      _this.coneListStyle = "display:none"
      _this.fenceEditStyle = "display:none"
    },
    fenceformsave(editFenceForm) {
      let _this = this
      _this.fenceInfo.startTimeDate = ""
      _this.fenceInfo.endTimeDate = ""
      _this.coneListStyle = "display:none"

      this.$refs.editFenceForm.validate(valid => {
        if (valid) {
          /* json格式提交： */
          let formData = JSON.stringify(_this.fenceInfo)
          let jsonData = JSON.parse(formData)
          let config = {
            headers: { "Content-Type": "application/json" }
          }
          this.axios.post("fence/editFence", formData, config).then(res => {
            if (res.data.code == "200") {
              this.$message({
                message: "修改数据成功！",
                duration: 2000,
                type: "success",
                offset: "300"
              })
              _this.fenceStyle = "display:none"
              this.axios
                .get("fence/listFences")
                .then(function(response) {
                  let result = response.data
                  if (result.code == "200") {
                    _this.fenceData = result.result
                    let r = 0
                    if (_this.fenceData.length > 0) {
                      for (let s = 0; s < _this.fenceData.length; s++) {
                        console.log(_this.fenceData[s].id)
                        console.log(formData.id)
                        if (_this.fenceData[s].id == jsonData.id) {
                          r = s
                          break
                        }
                      }
                    }
                    _this.$refs.fenceTable.setCurrentRow(_this.fenceData[r])
                    console.log(_this.fenceData[r])
                    _this.playPoly(_this.fenceData[r])
                  }
                })
                .catch(function(error) {
                  console.log(error)
                })
            }
            if (_this.fence != undefined) {
              global.map.remove(_this.fence)
            }
            if (_this.overlays.length > 0) {
              global.map.remove(_this.overlays)
              _this.overlays.splice(0, 1)
              _this.overlays = []
            }
            _this.fenceEditStyle = "display:none"
          })
        } else {
        }
      })
    },
    playPoly(row) {
      this.removePol()
      if (row.ptNum >= 3) {
        let weis = row.points
        let arrwei = weis.split(",")
        let po = []
        for (let j = 0; j < arrwei.length - 1; j++) {
          let p = []
          p.push(arrwei[j])
          p.push(arrwei[++j])
          po.push(p)
        }
        let thisfence = new AMap.Polygon({
          path: po,
          strokeColor: "#1791fc",
          strokeWeight: 2,
          strokeOpacity: 0.2,
          fillOpacity: 0.5,
          fillColor: "#1791fc",
          zIndex: 50
        })
        this.polygons.push(thisfence)
        global.map.add(thisfence)
      }
    },
    fenceformadd(saveFenceForm) {
      let _this = this
      _this.coneListStyle = "display:none"
      this.$refs.saveFenceForm.validate(valid => {
        if (valid) {
          /* json格式提交： */
          _this.fenceInfo.startTimeDate = ""
          _this.fenceInfo.endTimeDate = ""
          let formData = JSON.stringify(_this.fenceInfo)
          let config = {
            headers: { "Content-Type": "application/json" }
          }
          this.axios.post("fence/saveFence", formData, config).then(res => {
            if (res.data.code == "200") {
              this.$message({
                message: "添加围栏数据成功",
                duration: 2000,
                type: "success",
                offset: "300"
              })
              _this.fenceStyle = "display:none"
              this.axios
                .get("fence/listFences")
                .then(function(response) {
                  let result = response.data
                  if (result.code == "200") {
                    _this.fenceData = result.result
                    _this.$refs.fenceTable.setCurrentRow(_this.fenceData[0])
                    _this.playPoly(JSON.parse(formData))
                  }
                })
                .catch(function(error) {
                  console.log(error)
                })
            }
            if (res.data.code == "500") {
              this.$message({
                message: res.data.message,
                duration: 2000,
                type: "warning",
                offset: "300"
              })
            }
            _this.fenceInfo.startTimeDate = "2008-01-01 00:00:00"
            _this.fenceInfo.endTimeDate = "2008-01-01 23:59:59"
            _this.fenceInfo.startTime = "00:00:00"
            _this.fenceInfo.endTime = "23:59:59"
          })
          if (_this.overlays.length > 0) {
            global.map.remove(_this.overlays)
            _this.overlays.splice(0, 1)
            _this.overlays = []
          }
        } else {
        }
      })
    },
    drawPolygon() {
      let _this = this
      _this.typeStyle1 = "font-size: 12px;color: #1c7cd5"
      _this.typeStyle2 = "font-size: 12px;color: #777"
      if (_this.fence != undefined) {
        global.map.remove(_this.fence)
      }
      _this.fenceInfo.source = "1"
      _this.coneListStyle = "display:none"
      this.$message({
        message: "点击鼠标左键按键绘制围栏，双击鼠标 左键结束绘制",
        duration: 2000,
        type: "success",
        offset: "300"
      })
      global.map.setDefaultCursor("crosshair")
      // global.map.setDefaultCursor('cursorHz');
      if (_this.overlays.length > 0) {
        global.map.remove(_this.overlays)
        _this.overlays.splice(0, 1)
        _this.overlays = []
      }
      _this.mouseTool = new AMap.MouseTool(global.map)
      _this.mouseTool.polygon({
        strokeColor: "#1791fc",
        strokeWeight: 2,
        strokeOpacity: 0.2,
        fillOpacity: 0.5,
        fillColor: "#1791fc"
      })
      // 点击marker事件
      _this.mouseTool.on("draw", e => {
        _this.overlays[0] = e.obj
        let path = e.obj.getPath()
        let points = ""
        path.forEach(e => {
          points += e.getLng() + ","
          points += e.getLat() + ","
          console.log([e.getLng(), e.getLat()])
        })
        _this.fenceInfo.ptNum = path.length
        _this.fenceInfo.points = points
        _this.mouseTool.close(true)
        global.map.add(_this.overlays[0])
        global.map.setDefaultCursor("pointer")
      })
    },
    checkCone() {
      let _this = this
      _this.typeStyle2 = "font-size: 12px;color: #1c7cd5"
      _this.typeStyle1 = "font-size: 12px;color: #777"
      _this.removePol()
      _this.coneListStyle = "display:block"
      _this.fenceInfo.source = "0"
      this.$message({
        message: "您选择了锥桶定义围栏！",
        duration: 2000,
        type: "success",
        offset: "300"
      })
      if (_this.mouseTool != undefined && _this.mouseTool != {}) _this.mouseTool.close(true)
      global.map.setDefaultCursor("pointer")
      if (_this.overlays.length > 0) {
        global.map.remove(_this.overlays)
        _this.overlays.splice(0, 1)
        _this.overlays = []
      }
    },

    format(cjsj) {
      var date = new Date(cjsj) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-"
      var M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-"
      var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " "
      var h = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":"
      var m = (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) + ":"
      var s = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds()
      return Y + M + D + h + m + s
    },

    formatTime(cjsj) {
      var date = new Date(cjsj) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-"
      var M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-"
      var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " "
      var h = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":"
      var m = (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) + ":"
      var s = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds()
      return h + m + s
    }
  }
}
</script>

<style scoped>
.cone-list {
  display: none;
  flex-direction: column;
  min-width: 0;
  background-color: #fff;
  word-wrap: break-word;
  background-clip: border-box;
  width: 200px;
  border-width: 0;
  border-radius: 0.4rem;
  box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
  position: fixed;
  top: 380px;
  right: 14rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 10px 10px;
  z-index: 190;
  height: 120px;
}
.el-radio {
  color: #606266;
  cursor: pointer;
  margin-right: 10px;
  margin-top: 3px;
}
.el-radio.is-bordered + .el-radio.is-bordered {
  margin-left: 0px;
}
.fence-style-body {
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
  border-width: 0;
  position: fixed;
  top: 80px;
  left: 1rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
  border-radius: 0.2rem;
  z-index: 999;
  height: 180px;
  background-color: rgba(255, 255, 255, 1);
  width: 710px;
  padding: 2px;
}
.fence-style-body .el-table__header tr,
.el-table__header th {
  padding: 0;
  height: 30px;
}
.fence-style-body .el-table__body tr,
.fence-style-body .el-table__body td {
  padding: 0;
  height: 30px;
}

.fence-style-body .el-table__row td {
  background-color: rgba(233, 243, 252, 1);
}
.fence-style-body .el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: rgba(246, 251, 255, 1);
}
.fence-style-body .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #d3faef;
  color: #118b9c;
}

.fence-style-body table tr:first-child th:first-child {
  border-top-left-radius: 4px;
}

.fence-style-body table tr:first-child th:last-child {
  border-top-right-radius: 4px;
}
.fence-style-body table tr:last-child td:first-child {
  border-bottom-left-radius: 4px;
}

.fence-style-body table tr:last-child td:last-child {
  border-bottom-right-radius: 4px;
}

/*修改滚动条样式*/
div::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  /**/
}
div::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}
div::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 10px;
}
div::-webkit-scrollbar-thumb:hover {
  background: #1c7cd5;
}
div::-webkit-scrollbar-corner {
  background: #179a16;
}
.fence-add {
  position: absolute;
  left: 622px;
  top: 84px;
  z-index: 999;
}
.fence-form {
  display: none;
  flex-direction: column;
  min-width: 0;
  background-color: #fff;
  word-wrap: break-word;
  background-clip: border-box;
  width: 180px;
  border-width: 0;
  border-radius: 0.4rem;
  box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
  position: fixed;
  top: 80px;
  right: 1rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 10px 10px;
  z-index: 200;
  height: 445px;
}
.fence-form .el-input__inner {
  border-radius: 1px;
}
.fence-form .el-input--prefix .el-input__inner {
  padding-left: 10px;
}
.fence-form .el-input__prefix {
  left: 145px;
}

.fence-form-edit {
  display: none;
  flex-direction: column;
  min-width: 0;
  background-color: #fff;
  word-wrap: break-word;
  background-clip: border-box;
  width: 180px;
  border-width: 0;
  border-radius: 0.4rem;
  box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
  position: fixed;
  top: 80px;
  right: 1rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 10px 10px;
  z-index: 200;
  height: 445px;
}
.fence-form-edit .el-input__inner {
  border-radius: 1px;
}
.fence-form-edit .el-input--prefix .el-input__inner {
  padding-left: 10px;
}
.fence-form-edit .el-input__prefix {
  left: 145px;
}
.el-table {
  font-family: "Microsoft YaHei" !important;
  font-size: 10px;
  font-weight: 500;
  color: #000;
}
.el-table td,
.el-table th {
  padding: 3px 0;
}
.el-table-column--selection .cell {
  padding-left: 10px;
}
.el-table--striped .el-table__body tr.el-table__row--striped.current-row td {
  background-color: #2aca76 !important;
}
/*element鼠标滑过高亮显示的颜色也太淡*/
.el-table__body tr:hover > td {
  background-color: #3dc7ab !important;
}
</style>
